<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>查询采购单</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="query-order" v-if="user!==null">
      <div>
        <search-form :search="search" :user="user" @reset-search="resetSearch" @search="searchData(true)">
          <el-button size="medium" type="primary" @click="printOrder">打印</el-button>
          <el-button v-if="orderList.length>0" size="medium" type="primary" @click="approvalOrders">批量审核</el-button>
          <el-button size="medium" type="primary" @click="exportExcel">导出excel</el-button>
          <template slot="right">
            <table-col-show-select v-if="tableHideColumnKey!==null" :table-name="tableName" :current-column-name="currentColumnName"
              :hide-column.sync="tableHideColumnKey">
            </table-col-show-select>
          </template>
        </search-form>
        <div class="colorDesc clearfix">
          <div>
            <div class="color accessTardiness"></div>
            <span>代表接近拖期(3天以内包括3天)</span>
          </div>
          <div>
            <div class="color toDay"></div>
            <span>代表当天应交货</span>
          </div>
          <div>
            <div class="color ok"></div>
            <span>代表已入库完成</span>
          </div>
          <div>
            <div class="color slightlyTardiness"></div>
            <span>代表拖期一至三天</span>
          </div>
          <div>
            <div class="color superTardiness"></div>
            <span>代表拖期四天至十天</span>
          </div>
          <div>
            <div class="color NoSolutionTardiness"></div>
            <span>代表拖期十天以上</span>
          </div>
          <div>
            <span>其他情况没有颜色</span>
          </div>
        </div>
        <div class="stat-data" v-if="statData!==null">
          <span>总金额:{{statData.totalMoney.toFixed(2)}}</span>
          <template v-if="oldSearch.type===1">
            <span>总订单数:{{statData.orderTotal.toFixed(0)}}</span>
            <span>总投料数:{{statData.feedTotal.toFixed(0)}}</span>
          </template>
        </div>
      </div>
      <div v-if="orderStatList.length>0" style="margin-bottom:5px" class="order-table-stat">
        <template v-for="item in orderStatList">
          <span :key="'materialType_'+item.materialType">{{item.materialType}}:{{item.count}}</span>
        </template>
      </div>
      <div class="order-table-order" :key="'table_'+oldSearch.type">
        <el-table fit stripe border highlight-current-row ref="purchaseOrder" row-key="printOrderId" :data="orderList" style="width:100%"
          :cell-class-name="getOrderCellClassName" height="parent" :hide-column-keys="getTableHideColumns()">
          <el-table-column fixed="left" :resizable="false" type="index" label="序号" width="40px" align="center"></el-table-column>
          <checkbox-table-column width="70px" header-text="打印" :selectable="canSelect" check-field="printOrderId" ref="printCol"
            @select-change="selectRow" key="printCol"></checkbox-table-column>
          <checkbox-table-column width="70px" header-text="审批" :selectable="canApproval" check-field="printOrderId" ref="approvalCol"
            @select-change="selectApproval" key="approvalCol"></checkbox-table-column>
          <el-table-column :resizable="false" prop="handle" label="操作" width="100px" key="handle" header-align="center">
            <template slot-scope="scope" v-if="scope.row.isApprovalUser===1">
              <div v-if="scope.row.status===0" style="text-align:center;">
                <el-button type="primary" size="mini" style="padding-left:7px;padding-right:7px;" @click="updateStatus(scope.row,1)">
                  审核
                </el-button>
                <el-button type="danger" size="mini" style="padding-left:7px;padding-right:7px;margin-left:0;" @click="retreatOrder(scope.row)">
                  退回
                </el-button>
              </div>
              <div v-if="oldSearch.type===1&&scope.row.isApproval===1" style="text-align:center;">
                <el-button type="danger" size="mini" style="padding-left:7px;padding-right:7px;margin-left:0;" @click="retreatOrder(scope.row)">
                  退回
                </el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="status" label="状态" width="70px" key="status" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg(`purchaseOrder.status.${scope.row.status}`)}}</span>
            </template>
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="companyOrderId" label="订单编号" :auto-width="true" min-width="105px" key="companyOrderId"
            header-align="center">
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="articleNo" label="客户型号" :auto-width="true" min-width="105px" key="articleNo"
            header-align="center">
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="factoryNo" label="工厂型号" :auto-width="true" min-width="105px" key="factoryNo"
            header-align="center">
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="providerNo" label="供方编号" :auto-width="true" min-width="105px" key="providerNo"
            header-align="center">
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="providerName" label="供应商" :auto-width="true" min-width="85px" key="providerName"
            header-align="center">
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="purchasePeople" label="采购员" :auto-width="true" min-width="105px" key="purchasePeople"
            header-align="center">
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="materialName" label="物料名称" :auto-width="true" min-width="95px" key="materialName"
            header-align="center">
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="materialType" label="物料类型" min-width="125px" key="materialType" header-align="center">
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="color" label="编号" :auto-width="true" min-width="85px" key="color" header-align="center">
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="colorDescription" label="描述" :auto-width="true" min-width="105px" key="colorDescription"
            header-align="center">
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="model" label="规格型号" :auto-width="true" min-width="95px" key="model"
            header-align="center"></el-table-column>
          <el-table-column sortable :resizable="false" prop="materialDeptName" label="物料部门" :auto-width="true" min-width="95px" align="center"
            key="materialDeptName"></el-table-column>
          <el-table-column sortable :resizable="false" prop="qualityType" label="材质" :auto-width="true" min-width="75px" key="qualityType"
            header-align="center">
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="price" label="含税单价" :auto-width="true" min-width="95px" align="center">
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="totalMoney" label="金额" :auto-width="true" min-width="75px" align="center">
          </el-table-column>
          <el-table-column v-if="oldSearch.type===1" sortable :resizable="false" prop="orderTotal" label="订单数" :auto-width="true" min-width="95px"
            align="center" key="orderTotal"></el-table-column>
          <el-table-column v-if="oldSearch.type===1" sortable :resizable="false" prop="feedTotal" label="投料数(付)" :auto-width="true" min-width="110px"
            align="center" key="feedTotal"></el-table-column>
          <el-table-column v-if="oldSearch.type===1" sortable :resizable="false" prop="feedOrderFeedCount" label="投料数" :auto-width="true"
            align="center" min-width="95px" key="feedOrderFeedCount">
            <template slot-scope="scope">
              <span v-if="scope.row.feedOrderFeedCount!==null">{{scope.row.feedOrderFeedCount}} {{scope.row.unit}}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="oldSearch.type===1" sortable :resizable="false" prop="availableCount" label="占用数" :auto-width="true" min-width="95px"
            align="center" key="availableCount"></el-table-column>
          <el-table-column v-if="hasYlts()" sortable :resizable="false" prop="yltsTotal" label="用料条数" :auto-width="true" min-width="95px"
            align="center" key="yltsTotal"></el-table-column>
          <el-table-column sortable :resizable="false" prop="purchaseCount" label="采购数量" :auto-width="true" min-width="105px" key="purchaseCount"
            align="center">
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="inCount" label="入库数量" :auto-width="true" min-width="105px" key="inCount" align="center">
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="inCountDate" label="入库日期" width="100px" key="inCountDate" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.inCountDate!==''">{{moment(scope.row.inCountDate).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
          </el-table-column>
          <el-table-column sortable :resizable="false" sort-by="tax" label="税率" width="75px" key="tax" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.tax!==''">{{scope.row.tax}}%</span>
            </template>
          </el-table-column>

          <template v-for="option in laterPhaseOptions">
            <el-table-column :key="option.field" sortable :resizable="false" :prop="option.field" :label="option.label" width="105px" align="center">
              <template slot-scope="scope">
                <template v-if="!scope.row.isCanUpdate">
                  <span v-if="scope.row[option.field]!==''">
                    {{moment(scope.row[option.field]).format('YYYY-MM-DD')}}
                  </span>
                </template>
                <update-restoration-date-popover v-else :order="scope.row" :order-type="oldSearch.type">
                  <span v-if="scope.row[option.field]!==''">
                    {{moment(scope.row[option.field]).format('YYYY-MM-DD')}}
                  </span>
                  <div v-else style="height:25px"></div>
                </update-restoration-date-popover>
              </template>
            </el-table-column>
          </template>

          <el-table-column sortable :resizable="false" prop="purchaseTime" label="采购日期" width="100px" key="purchaseTime" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.purchaseTime!==''">{{moment(scope.row.purchaseTime).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="isPrint" label="是否打印" width="100px" key="isPrint" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg(`purchaseOrder.printStatus.${scope.row.isPrint}`)}}</span>
            </template>
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="createUser" label="制单人" min-width="100px" key="createUser" header-align="center">
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="createTime" label="制单日期" width="100px" key="createTime" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.createTime!==''">{{moment(scope.row.createTime).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="approvalUser" label="审核人" min-width="140px" key="approvalUser" header-align="center">
            <template slot-scope="scope">
              <el-tooltip v-if="scope.row.status === 0" placement="top">
                <span slot="content">
                  {{scope.row.auditableUser}}
                </span>
                <span>移入查看审核人</span>
              </el-tooltip>
              <span v-else>{{scope.row.approvalUser}}</span>
            </template>
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="approvalTime" label="审核时间" min-width="100px" key="approvalTime" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.approvalTime!==''">{{moment(scope.row.approvalTime).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip v-if="oldSearch.type===1" :resizable="false" prop="feedOrderRemark" label="投料单备注" min-width="180px" key="feedOrderRemark"
            header-align="center">
          </el-table-column>
          <el-table-column show-overflow-tooltip v-else-if="oldSearch.type===2" :resizable="false" prop="remark" label="备注" min-width="180px" key="remark"
            header-align="center">
          </el-table-column>
        </el-table>
      </div>
      <table-pagination v-if="pagination.totalCount!==0" :pagination="pagination" @change="pageChange">
      </table-pagination>
    </div>

    <el-dialog fullscreen class="dialog-fullscreen" title="打印预览" :visible.sync="openPrintDialog" @closed="printDialogClose">
      <div style="height:100%;overflow:auto" v-if="openPrintDialog">
        <print-purchase-order v-if="printTempl===null||printTempl===undefined" :order-list="selectOrders" :order-type="oldSearch.type"
          @order-change="printChange">
        </print-purchase-order>
        <print-purchase-order-template v-else :print-data="selectOrders" :template="printTempl" @order-change="printChange"
          :order-type="oldSearch.type">
        </print-purchase-order-template>
      </div>
    </el-dialog>
  </div>
</body>

<script src="https://upload.shinehao.com.cn/20181222140744qiniu.min.js"></script>
<script src="https://upload.shinehao.com.cn/20190416085621dom-to-image.min.js"></script>
<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/sysPrintTemplateOrder.css",
    "/vueSystem/components/css/sysCommonSearch.css",
    "/vueSystem/components/css/searchBtnView.css",
    "/vueSystem/components/css/showTextarea.css",
    "/vueSystem/components/css/vueEditor.css",
    "/vueSystem/mixins/printOrderConfigButton.css",
    "./css/searchForm.css",
    "./css/orderForm.css",
    "../mixins/orderPrint.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/components/sysPrintTemplateOrder.js",
    "/vueSystem/components/sysCommonSearch.js",
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/components/checkboxTableColumn.js",
    "/vueSystem/components/showTextarea.js",
    "/vueSystem/components/config/templateColumnConfig.js",
    "/vueSystem/mixins/printOrderMixin.js",
    "/vueSystem/mixins/tablePaginationMixin.js",
    "/vueSystem/models/baseModel.js",
    "/vueSystem/models/templateConfig.js",
    "/vueSystem/js/commonTemplateUtil.js",
    "/vueSystem/mixins/printCommonOrderMixin.js"
  ]);
  importTableColShowConfigFiles();

</script>
<script src="../models/orderModel.js"></script>
<script src="../utils/moduleUtil.js"></script>
<script src="../mixins/printPurchaseOrderTemplMixin.js"></script>
<script src="./searchForm.js"></script>
<script src="./orderForm.js"></script>
<script src="./updateRestorationDatePopover.js"></script>
<script src="./printPurchaseOrder.js"></script>
<script src="./printPurchaseOrderTemplate.js"></script>

<script>
  var app = new Vue({
    el: '#app',
    mixins: [
      printOrderMixin('purchaseOrder'),
      tablePaginationMixin(),
      tableColShowMixin('purchaseOrder')
    ],
    computed: {
      orderStatList: function () {
        var orderList = this.selectOrderList;
        var orderGroup = _.groupBy(orderList, function (obj) {
          var materialType = obj.materialType;
          if (SysUtil.isEmpty(materialType)) {
            return '无';
          }
          return materialType;
        });
        var statList = [];
        for (var materialType in orderGroup) {
          var list = orderGroup[materialType];
          var totalCount = _.sumBy(list, function (obj) {
            var count = obj.purchaseCount;
            if (SysUtil.isEmpty(count)) {
              return 0;
            }
            return count;
          });
          statList.push({
            materialType: materialType,
            count: totalCount
          });
        }
        return statList;
      }
    },
    watch: {
      'oldSearch.type': function (val) {
        var columnName = val === 1 ? 'purchaseOrder-order' : 'purchaseOrder-warehouse';
        this.columnName = columnName;
        this.currentColumnName = columnName;
      }
    },
    data: function () {
      var self = this;
      var laterPhaseOptions = i18n.getDropDown('purchaseOrder.recoveryPhase', [
        'laterPhaseOne', 'laterPhaseTwo', 'laterPhaseThr', 'laterPhaseFour'
      ], {
        valueField: "field"
      });
      var search = {
        type: 1,
        status: '',
        factoryNo: '',
        customerNo: '',
        orderNo: '',
        materialDept: '',
        startTime: null,
        endTime: null,
        oweCountMin: undefined,
        oweCountMax: undefined,
        isInCount: '',
        providerName: '',
        purchaseCount: '',
        tardinessMin: undefined,
        tardinessMax: undefined,
        materialName: '',
        materialType: '',
        model: '',
        color: '',
        isPrint: '',
        providerNo: '',
        inCountDateStart: null,
        inCountDateEnd: null
      };
      return {
        loading: false,
        selectIds: [],
        selectOrders: [],
        approvalIds: [],
        orderList: [],
        selectOrderList: [],
        user: null,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        laterPhaseOptions: laterPhaseOptions,
        i18n: i18n,
        moment: moment,
        statData: null
      };
    },
    created: function () {
      this.setUser();
    },
    methods: {
      setUser: function () {
        var self = this;
        return SysUtil.getUser().then(function (user) {
          self.user = user;
          var isPayUser = user.companyInfo.status === 1;
          if (!isPayUser) {
            self.search.type = 2;
          }
          return user;
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var search = this.search;
        if (search.type === '') {
          this.$alert('请选择采购类型', '信息');
          return;
        }

        if (isSearch) {
          this.pagination.currentPage = 1;
        }

        var postData = this.getPostData();
        var pagination = this.pagination;
        postData.currentPage = pagination.currentPage;
        postData.pageSize = pagination.pageSize;

        this.loading = true;
        var self = this;
        ModuleUtil.getPurchaseOrderData(postData, this.user).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
            self.selectIds = [];
          }

          var orderList = res.orderList;
          self.statData = self.getStatData(orderList);

          self.approvalIds = [];
          self.selectOrderList = [];
          self.orderList = orderList;
          self.pagination.totalCount = res.totalCount;

          self.$nextTick(function () {
            if (!self.$refs['printCol']) {
              return;
            }
            var selectIds = self.selectIds;
            self.$refs['printCol'].toggleRowSelection(selectIds, true);
          });

          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      getPostData: function () {
        var search = this.search
        search = _.cloneDeep(search);

        if (search.isInCount === '') {
          search.isInCount = -1;
        }

        if (search.status === '') {
          search.status = -1;
        }

        if (search.purchaseCount === '') {
          search.purchaseCount = 2;
        }

        if (search.startTime === null) {
          delete search.startTime;
        } else {
          search.startTime = moment(search.startTime).startOf('day').valueOf();
        }

        if (search.endTime === null) {
          delete search.endTime;
        } else {
          search.endTime = moment(search.endTime).endOf('day').valueOf();
        }

        if (search.inCountDateStart === null) {
          delete search.inCountDateStart;
        } else {
          search.inCountDateStart = moment(search.inCountDateStart).startOf('day').valueOf();
        }

        if (search.inCountDateEnd === null) {
          delete search.inCountDateEnd;
        } else {
          search.inCountDateEnd = moment(search.inCountDateEnd).endOf('day').valueOf();
        }

        var fields = ['materialName', 'materialType', 'model', 'color', 'providerName', 'isPrint', 'oweCountMin', 'oweCountMax',
          'tardinessMin', 'tardinessMax'
        ];
        SysUtil.delNullData(search, fields);

        var materialDept = search.materialDept;
        if (materialDept !== '') {
          search.materialDeptId = materialDept.materialDeptId;
        }
        delete search.materialDept;
        return search;
      },

      pageChange: function () {
        this.searchData();
      },

      printChange: function (isSearch) {
        this.searchData(isSearch);
      },

      getStatData: function (orderList) {
        if (orderList.length === 0) {
          return null;
        }

        var type = this.oldSearch.type;
        var fields = ['totalMoney'];
        if (type === 1) {
          fields.push('orderTotal', 'feedTotal')
        }
        var statData = {};
        for (var i = 0; i < orderList.length; i++) {
          var order = orderList[i];
          for (var j = 0; j < fields.length; j++) {
            var field = fields[j];
            var value = order[field];
            if (SysUtil.isEmpty(value)) {
              value = 0;
            } else if (typeof value === 'string') {
              value = parseFloat(value);
            }

            if (statData[field] === undefined) {
              statData[field] = value;
            } else {
              statData[field] += value;
            }
          }
        }
        return statData;
      },

      canSelect: function (order) {
        var printNeedApproval = order.printNeetApproval;
        if (printNeedApproval === 0) {
          return true;
        }
        if (order.status === 1) {
          return true;
        }
        return false;
      },

      canApproval: function (order) {
        var status = order.status;
        return status === 0 && order.isApprovalUser === 1;
      },

      selectRow: function (selectOrderIds) {
        var selectIds = this.selectIds;
        var orderList = this.orderList;
        var orderIds = _.map(orderList, 'printOrderId');
        orderIds = _.difference(orderIds, selectOrderIds);
        selectIds = _.difference(selectIds, orderIds);
        selectIds = _.union(selectIds, selectOrderIds);
        this.selectIds = selectIds;
      },

      selectApproval: function (selectIds, orderList) {
        this.approvalIds = selectIds;
        this.selectOrderList = orderList;
      },

      retreatOrder: function (order) {
        var self = this;
        this.$prompt('请输入退回原因', '退回原因').then(function (option) {
          var value = option.value;
          if (value === null) {
            value = '';
          }
          value = value.trim();
          if (value === '') {
            value = '退回';
          }
          self.updateStatus(order, 2, value);
        }).catch(function () {});
      },

      updateStatus: function (order, status, reasonText) {
        var self = this;
        var postData = {
          purchaseDetailId: order.printOrderId,
          type: this.oldSearch.type,
          status: status,
          name: order.createUser
        };
        var orderId = order.orderId;
        if (orderId !== undefined) {
          postData.orderId = orderId;
        }

        if (reasonText !== undefined) {
          postData.approvalReason = reasonText;
        }
        this.loading = true;
        ajaxRequest('purchaseOrder/approvalPurchaseOrder', postData).then(function (msg) {
          self.loading = false;

          var selectIds = self.selectIds;
          selectIds = _.difference(selectIds, [order.printOrderId]);
          self.selectIds = selectIds;

          self.$alert(msg, '信息', {
            callback: function (action) {
              self.searchData();
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      },

      approvalOrders: function () {
        var approvalIds = this.approvalIds;
        if (approvalIds.length === 0) {
          this.$alert('请选择需要批量审核的采购单', '信息');
          return;
        }
        var postData = {
          type: this.oldSearch.type,
          status: 1,
          ids: approvalIds.join(',')
        };

        this.loading = true;
        var self = this;
        ajaxRequest('approval/setAllPurchaseStatus', postData).then(function (msg) {
          self.loading = false;

          self.$alert(msg, '信息', {
            callback: function (action) {
              self.searchData();
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      },

      printOrder: function () {
        var orderIds = this.selectIds;
        if (orderIds.length === 0) {
          this.$alert('请选择需要打印的订单', '信息');
          return;
        }

        var orderType = this.oldSearch.type;
        this.loading = true;
        var self = this;
        ModuleUtil.getPurchaseOrderData({
          type: orderType,
          orderIds: orderIds.join(',')
        }, this.user).then(function (res) {
          self.loading = false;
          var orderList = res.orderList;
          self.toPreviewTemplateOrder(function (printTempl) {
            if (SysUtil.isEmpty(printTempl)) {
              self.selectOrders = orderList;
            } else {
              var selectOrders = self.getMergeOrders(orderList);
              self.selectOrders = selectOrders;
            }
          });
        }).catch(function (error) {
          self.loading = false;
        });
      },

      exportExcel: function () {
        var postData = this.getPostData();
        var formParam = SysUtil.formatFormParam(postData);
        var basePath = SysUtil.getBasePath();
        var path = `${basePath}/purchaseOrder/exportGetPurchaseOrderList?${formParam}`;
        window.open(path);
      },

      getMergeOrders: function (orderList) {
        var orderType = this.oldSearch.type;
        var orderGroup;

        if (orderType === 1) {
          orderGroup = _.groupBy(orderList, function (order) {
            return `${order.orderId}_${order.materialCode}_${order.providerName}`;
          });
        } else {
          orderGroup = _.groupBy(orderList, function (order) {
            return `${order.materialCode}_${order.providerName}`;
          });
        }
        var orders = [];
        for (var key in orderGroup) {
          var orderGroups = orderGroup[key];
          var order = _.cloneDeep(orderGroups[0]);
          var ids = _.map(orderGroups, 'printOrderId');
          order.printOrderIds = ids;

          var purchaseCount = _.sumBy(orderGroups, 'purchaseCount');
          order.purchaseCount = _.round(purchaseCount, 4);

          var totalMoney = _.sumBy(orderGroups, 'totalMoney');
          order.totalMoney = _.round(totalMoney, 2);

          var remarks = [];
          for (var i = 0; i < orderGroups.length; i++) {
            var remarkOrder = orderGroups[i];
            var remark = remarkOrder.remark;
            if (!SysUtil.isEmpty(remark)) {
              remarks.push(remark);
            }
          }
          remarks = _.uniq(remarks);
          order.remark = remarks.join('\n');

          var obj = _.maxBy(orderGroups, 'maxLaterPhase');
          if (obj !== undefined) {
            order.maxLaterPhase = obj.maxLaterPhase;
          }

          var printOrder = _.find(orderGroups, {
            isPrint: 0
          });
          if (printOrder !== undefined) {
            order.isPrint = 0;
          } else {
            order.isPrint = 1;
          }
          orders.push(order);
        }
        return orders;
      },

      printDialogClose: function () {
        this.selectOrders = [];
      },

      getOrderCellClassName: function (option) {
        var column = option.column;
        var property = column.property;
        if (property !== 'handle') {
          return '';
        }
        var order = option.row;
        if (order.arrearCount > 0) {
          var rangeDay = order.tardiness;
          var className = '';
          if (rangeDay === null) {
            return '';
          }

          if (rangeDay <= -10) {
            className = 'NoSolutionTardiness';
          } else if (rangeDay <= -3) {
            className = 'superTardiness';
          } else if (rangeDay < 0) {
            className = 'slightlyTardiness';
          } else if (rangeDay === 0) {
            className = 'toDay';
          } else if (rangeDay <= 3) {
            className = 'accessTardiness';
          }
        } else {
          className = 'ok';
        }
        var companyInfo = this.user.companyInfo;
        var notShowTardinessStartDate = companyInfo.notShowTardinessStartDate;
        var notShowTardinessEndDate = companyInfo.notShowTardinessEndDate;
        var createTime = order.createTime;

        if (notShowTardinessStartDate === null && notShowTardinessEndDate === null) {
          return className;
        }

        if (notShowTardinessStartDate !== null) {
          if (moment(createTime).isBefore(notShowTardinessStartDate, 'day')) {
            return className;
          }
        }

        if (notShowTardinessEndDate !== null) {
          if (moment(createTime).isAfter(notShowTardinessEndDate, 'day')) {
            return className;
          }
        }
        return 'ok';
      },

      hasYlts: function () {
        var type = this.oldSearch.type;
        if (type === 2) {
          return false;
        }
        var orderList = this.orderList;
        if (orderList.length === 0) {
          return false;
        }
        return orderList[0].isShowYlts;
      }
    },
    components: {
      CheckboxTableColumn: CheckboxTableColumn,
      PrintPurchaseOrder: PrintPurchaseOrder,
      PrintPurchaseOrderTemplate: PrintPurchaseOrderTemplate,
      UpdateRestorationDatePopover: UpdateRestorationDatePopover,
      SearchForm: SearchForm
    }
  });

</script>
<style>
  .query-order {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    display: flex;
    flex-direction: column;
    overflow: auto;
  }

  .query-order .order-table-stat>span {
    margin-right: 10px;
  }

  .query-order .order-table-stat>span:last-child {
    margin-right: 0;
  }

  .query-order .stat-data {
    margin-bottom: 5px;
  }

  .query-order .stat-data>span+span {
    margin-left: 5px;
  }

  .order-table-order {
    flex: 1;
    overflow: auto;
  }

  #app .accessTardiness {
    background: #6fbde4;
  }

  #app .ok {
    background: #0ff500;
  }

  #app .toDay {
    background: #f7e8e5;
  }

  #app .slightlyTardiness {
    background: #d4bab4;
  }

  #app .superTardiness {
    background: #ea928b;
  }

  #app .NoSolutionTardiness {
    background: #e80000;
  }

  .colorDesc>div {
    float: left;
    height: 30px;
    margin-right: 10px;
  }

  .colorDesc>div>* {
    float: left;
    line-height: 30px;
  }

  .colorDesc .color {
    height: 20px;
    width: 20px;
    margin-top: 5px;
    margin-right: 5px;
  }

</style>

</html>
